<template>
  <div>
    <div>
      <div>
        这是csstable
      </div>
      <div class="table tableWidth">
        <div class="tableRow">
          <div class="tableCell">tableCell</div>
          <div class="tableCell">tableCell</div>
          <div class="tableCell">tableCell</div>
        </div>
        <div class="tableRow tableMarginWithPadding">
          <div class="tableCell">tableCell</div>
          <div class="tableCell">tableCell</div>
          <div class="tableCell">tableCell</div>
        </div>
      </div>
    </div>
    <div>
      <div>这是table</div>
      <table class="tableWidth">
        <tr>
          <td>tableCell</td>
          <td>tableCell</td>
          <td>tableCell</td>
        </tr>
        <tr class="tableMarginWithPadding">
          <td>tableCell</td>
          <td>tableCell</td>
          <td>tableCell</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "CssTable"
}
</script>

<style lang="scss" scoped>
.table{
  display: table; // 这些布局就是和table标签一模一样，没有什么意义
  // 表格样式里面不支持margin和padding都是一模一样，对于个性化布局没有什么意义
  .tableRow{
    display: table-row; // 不支持margin和pading
    .tableCell{
      display: table-cell; // 不支持margin
    }
  }
}
.tableWidth{
  width: 100%;
}
.tableMarginWithPadding{
  margin-top: 10px;
  padding: 10px;
}
</style>
